<template>
  <div id="home">
    <div style="display: flex; justify-content: center;width: 100%;">
      <a-divider style="width: 70%;min-width:70%">
    		<span style="font-weight: 700;color: #3e454c;">模型研发分析流程</span>
    	</a-divider>
    </div>
    <div id="analysisProcess" class="process">
    	<acard
    		v-for="(item,index) in analysisProcess"
    		:src="item.src"
    		:alt="item.alt"
        :title="item.title"
    		:text="item.text"
        :index="['Ⅰ','Ⅱ','Ⅲ','Ⅳ','Ⅴ','Ⅵ','Ⅶ','Ⅷ','Ⅸ'][index]"
    	/>
    </div>
    <div style="display: flex; justify-content: center;width: 100%;">
      <a-divider style="width: 70%;min-width:70%">
    		<span style="font-weight: 700;color: #3e454c;">自动化决策的业务流程</span>
    	</a-divider>
    </div>
    <div id="businessProcess" class="process">
    	<acard
    		v-for="(item,index) in businessProcess"
    		:src="item.src"
    		:alt="item.alt"
        :title="item.title"
    		:text="item.text"
        :index="['Ⅰ','Ⅱ','Ⅲ','Ⅳ','Ⅴ','Ⅵ','Ⅶ','Ⅷ','Ⅸ'][index]"
    	/>
    </div>
  </div>
</template>

<script>
import acard from './acard.vue'
export default {
  name: 'Home',
  components: {
    acard,
  },
	data(){
		return{
			businessProcess:Object.freeze([
				{
					src:require('@/assets/indexicon/1-1.png'),
          title:'申请人授权银行查询报告',
					text:'某申请人将自己的身份证提供给银行，签署授权银行查询个人信用报告，形成一个申请件；'
				},{
					src:require('@/assets/indexicon/1-2.png'),
          title:'银行向征信中心请求征信报文',
					text:'银行凭身份证号码向人民银行征信中心（也可以是其他任何第三方数据源）发送查询请求报文；'
				},{
					src:require('@/assets/indexicon/1-3.png'),
          title:'征信中心返回征信报文',
					text:'人民银行征信中心（会自动判断查询请求单位的合法性）返回该身份证号码的个人信用报告报文（可选返回的版本xml，html，pdf）；'
				},{
					src:require('@/assets/indexicon/1-4.png'),
          title:'对报文解析后进行存储',
					text:'银行保存该身份证号码的个人信用报告报文，并将报文解析后落库保存；'
				},{
					src:require('@/assets/indexicon/1-5.png'),
          title:'计算特征变量',
					text:'硕恩人行个人征信特征变量库实时引擎（数千个特征变量）对个人信用报告原始数据进行自动特征工程，计算出特征变量的值，存入特征变量实时仓库；'
				},{
					src:require('@/assets/indexicon/1-6.png'),
          title:'通过决策引擎进行判断',
					text:'决策引擎中配置部署的规则集对特征变量实时仓库传送过来的特征变量值进行判断（通过或者拒绝）；'
				},{
					src:require('@/assets/indexicon/1-7.png'),
          title:'申请件模型的封面',
					text:'决策引擎中部署的评分卡模型对特征变量实时仓库传送过来，并且没有踩中规则的申请件的特征变量进行计算，给出一个模型评分；'
				},{
					src:require('@/assets/indexicon/1-8.png'),
          title:'自动化决策',
					text:'在决策引擎中配置部署的阈值会对申请件进行自动化决策，针对高于给定阈值的申请件自动通过，低于给定阈值的申请件自动拒绝；'
				},{
					src:require('@/assets/indexicon/1-9.png'),
          title:'形成实时报表',
					text:'每天形成日报表，对日报表进行监控，维护，调整阈值，对自动化决策进行配置。'
				}
			]),
      analysisProcess:Object.freeze([
        {
        	src:require('@/assets/indexicon/2-1.png'),
          title:'积累一定量的数据',
        	text:'在信贷业务过程中积累了一定数量（样本量不小于5000条，目标样本不少于1000条）的个人信用报告批量报文（或者是落库后的批量数据）；'
        },{
        	src:require('@/assets/indexicon/2-2.png'),
          title:'附加目标变量注入进行计算',
        	text:'将以上批量的个人信息报告数据（X变量）以及目标变量数据（Y变量）注入硕恩人行个人征信特征变量库离线引擎（数十万个特征变量）进行计算；'
        },{
        	src:require('@/assets/indexicon/2-3.png'),
          title:'变量重要性评价',
        	text:'通过硕恩引擎对单个特征变量在给定目标变量条件下进行评估其重要性；'
        },{
        	src:require('@/assets/indexicon/2-4.png'),
          title:'选择模型',
        	text:'选用有效特征变量研发评分卡模型；'
        },{
        	src:require('@/assets/indexicon/2-5.png'),
          title:'模型部署',
        	text:'将评分卡模型部署到决策引擎（返回到业务流程）；'
        },{
        	src:require('@/assets/indexicon/2-6.png'),
          title:'模型调优',
        	text:'根据每天形成的日报表，对模型进行调优。'
        }
      ]),
		}
	},
  created() {
  },
  methods:{
  }
}
</script>

<style lang="less" scoped>
@rowgap:20px;
@columngap:20px;
@boxheight:calc((100vh - 60px - 60px - 45px - 60px - 3 * @rowgap) / 5);
#home{
  background-color: #fff;
  height:calc(100vh - 45px);
  overflow-y: scroll;
  padding: 0 50px;
}
.process{
  display:grid;
  grid-template-columns: repeat(3,calc((100% - 2 * @columngap )/ 3));
  align-items:center;
  grid-row-gap: @rowgap;
  grid-column-gap: @columngap;
}
#businessProcess{
  grid-template-rows: repeat(3,@boxheight);
}
#analysisProcess{
  grid-template-rows: repeat(2,@boxheight);
}
</style>